/**
 * @author lulongwen
 * Date: 2023-08-30 22:38
 * Description: ArrowRectangle 箭头矩形
 */
import { useMemo } from 'react';

type IProps = {
  width: number;
  height: number;
}

export function ArrowRectangle(props: IProps) {
  const { width, height} = props;
  const cx = width - 10;

  // d='M0,0 L120,0 L130,25 L120,50 L0,50 z'
  // c, x, y, c2x, c2y
  const path = useMemo(() => {
    return [
      ['M0', 0], // M0,0
      [`L${cx}`, 0], // L120,0
      [`L${width}`, height / 2], // L130,25
      [`L${cx}`, height], // L120,50
      ['L0', height], // L0,50
      ['z'],
    ]
      .map(item => item.join(','))
      .join(' ');
  }, [width, height]);

  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width={width}
      height={height}
      className='block'
    >
      <path
        // d='M0,0 L120,0 L130,25 L120,50 L0,50 z'
        d={path}
        fill='#784be8'
        strokeWidth='0'
        stroke='#fff'
      />
    </svg>
  );
}
